<template>
  <f7-page>
    <f7-navbar title="支付订单" back-link="Back"></f7-navbar>
    <div class="block-title block-title-medium">${{this.jiage}}</div>
    <div class="block-title">
      预订须知
      <br>
      <span>
        本酒店7*24小时全天服务服务，入住
        <br>时间为当天12:00之后，退房之前为
        第
        <br>二日12:00之前，若提前入住请电联
        <br>商家，最晚取消时间为入住当天
        <br>18:00之前若无按时入住房间整完保留
      </span>
    </div>

    <f7-button fill class="zhifu" @click="pay">支付</f7-button>
  </f7-page>
</template>
<style  scoped>
.block-title {
  text-align: center;
  top: 10%;
}
.zhifu {
  top: 20%;
  width: 100px;
  margin: 0 auto;
}
</style>
<script>
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
      jiage: this.$store.state.apiPrice.Price * this.$store.state.apiData.day
    };
  },
  mounted() {
    console.log(this.$store.state.apiData.day);
  },
  methods: {
    pay() {
      const self = this;
      const app = self.$f7;
      URL = "/caofuying/Booking/insertOrder";
      axios
        .post(
          URL,
          qs.stringify({
            Checkintime: this.$store.state.apiData.startdate,
            departuretime: this.$store.state.apiData.enddate,
            Price: this.jiage,
            contact: this.$store.state.apiCreateOrder.ordercontact,
            name: this.$store.state.apiCreateOrder.ordername,
            type: this.$store.state.apiPrice.Typepay
          })
        )
        .then(r => {});
      app.dialog.alert(`支付成功`, () => {
        this.$f7router.navigate("/");
      });
    }
  }
};
</script>
